import React from 'react'
import { Routes, Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'
import {
  BrowserRouter,
} from 'react-router-use-history'
import { createBrowserHistory } from 'history'

import './index.scss'

import Layout from './Layout'
import Computer from './components/Computer'
import Phone from './components/Phone'
import Counter from './components/Counter'

const routesElement = (
  <>
    <Route path="/" element={<Layout />}>
      <Route index element={<div>index page</div>} />
      <Route path="Computer" element={<Computer />} />
      <Route path="Phone" element={<Phone />} />
      <Route path="Counter" element={<Counter />} />
    </Route>
  </>
)

const router = createBrowserRouter(
  createRoutesFromElements(routesElement)
)

// const App: React.FC = () => {
//   return (
//     <RouterProvider router={router} fallbackElement={ <Fallback /> } />
//   )
// }
const userHistory = createBrowserHistory()
const App: React.FC = () => {
  return (
    <BrowserRouter history={userHistory}>
      <Routes>{routesElement}</Routes>
    </BrowserRouter>
  )
}

export function Fallback() {
  return <p>Performing initial data load</p>
}

export default App